<template>
  <div id="app">
    <div class="nav">
      <div class="navBar">
        <template v-for="(item, index) in updateNav">
          <li :key="index" v-if="!item.meta.hidden">
            <router-link :to="item.path">{{ item.meta.title }}</router-link>
          </li>
        </template>
      </div>
      <div class="login">
        <div>
          <el-button size="small" type="primary" @click="login">
            登录</el-button
          >
        </div>
        <div>
          <el-button size="small" type="danger" @click="loginOut">
            退出</el-button
          >
        </div>
      </div>
    </div>
 
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
// 加载动态路由
import useaddRoute from "./utils/loadingRouter";
import { mapGetters } from "vuex";
export default {
  name: "App",
  components: {},
  data() {
    return {
 
    };
  },
  created() {
    useaddRoute();
  },
  mounted() {},
 
  computed: {
    ...mapGetters(["updateNav", "updateStore"]),
  },
 
  methods: {
    // 登录
    login() {
      this.$confirm("确认登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.updateStore);
          if (!this.updateStore) {
            // 触发登录 更改状态
            this.$store.dispatch("updateStoreChange", true);
            console.log(this.updateStore);
            useaddRoute();
            this.$message({
              type: "success",
              message: "登录成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: "您已登录！！!",
            });
            return;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消登录",
          });
        });
    },
    // 退出
    loginOut() {
      this.$confirm("将要退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          this.$store.dispatch("updateStoreChange", false);
          this.isLogin ? "" : location.reload();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退出",
          });
        });
    },
  },
};
</script>
 
<style lang="scss">
.nav {
  padding: 10px 0;
  background-color: #545c64;
  display: flex;
  justify-content: space-between;
  .navBar {
    width: 800px;
    display: flex;
    li {
      width: 60px;
      color: #fff;
      text-align: center;
      font-size: 16px;
      line-height: 32px;
      margin-left: 30px;
    }
  }
  .login {
    width: 150px;
    display: flex;
    justify-content: space-around;
  }
}
.container {
  margin-top: 20px;
  width: 700px;
  height: 400px;
  border: 10px solid #f0f5ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: center;
  align-content: center;
}
</style>